import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MonkFormDesignComponent } from './monk-form-design.component';
import { CollapseItemListComponent } from './components/collapse-item-list/collapse-item-list.component';
import { DesignFormComponentPanelComponent } from './components/design-form-component-panel/design-form-component-panel.component';
import { LayoutItemComponent } from './components/layout-item/layout-item.component';
import { DesignFormNodeComponent } from './components/design-form-node/design-form-node.component';
import { DesignFormPropertiesComponent } from './components/design-form-properties/design-form-properties.component';
import { DesignFormItemPropertiesComponent } from './components/design-form-item-properties/design-form-item-properties.component';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzTabsModule } from 'ng-zorro-antd/tabs';
import { NzCollapseModule } from 'ng-zorro-antd/collapse';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzRadioModule } from 'ng-zorro-antd/radio';
import { NzEmptyModule } from 'ng-zorro-antd/empty';
import { PreviewFormDesignModule } from './preview-form-design/preview-form-design.module';
import { MatDialogModule } from '@angular/material/dialog';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import { NzSliderModule } from 'ng-zorro-antd/slider';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { DesignFormChangeOptionComponent } from './components/design-form-change-option/design-form-change-option.component';
import { CommonModule } from '@angular/common';
import { NzSwitchModule } from 'ng-zorro-antd/switch';
import { NzRateModule } from 'ng-zorro-antd/rate';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { SortablejsModule } from '../../sortablejs/lib/sortablejs.module';
import { FormDesignSanitizeUrlPipe } from './pipe/sanitize-url.pipe';
import { ColorPickerModule } from 'ngx-color-picker';
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
import { NzMenuModule } from 'ng-zorro-antd/menu';
import { NzNotificationModule } from 'ng-zorro-antd/notification';

@NgModule({
  declarations: [
    MonkFormDesignComponent,DesignFormNodeComponent,
    CollapseItemListComponent,DesignFormComponentPanelComponent,LayoutItemComponent,
    DesignFormPropertiesComponent,DesignFormItemPropertiesComponent,DesignFormChangeOptionComponent,
    FormDesignSanitizeUrlPipe,
  ],
  imports: [
    CommonModule,
    FormsModule,
    HttpClientModule,
    PreviewFormDesignModule,
    MatDialogModule,
    SortablejsModule.forRoot({ 
      animation: 200, 
      get forceFallback() {
        const getChromeVersion = ()=> {  
          // https://stackoverflow.com/questions/4900436/how-to-detect-the-installed-chrome-version
          var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
      
          return raw ? parseInt(raw[2], 10) : false;
        }
        const force = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./) && getChromeVersion() < 99
        return force;
      }
    }),
    NzFormModule,NzTabsModule,NzCollapseModule,NzInputModule,NzInputNumberModule,NzIconModule,NzRadioModule,
    NzEmptyModule,NzCheckboxModule,NzSliderModule,NzCardModule,NzSelectModule,NzSwitchModule,NzRateModule,
    NzToolTipModule,NzDropDownModule,NzMenuModule,NzNotificationModule,
    ColorPickerModule
  ],
  exports: [
    MonkFormDesignComponent,
  ]
})
export class MonkFormDesignModule { }